$f: 19.2;


.home {
  .banner {
    position: relative;

    // &::before {
    //   content: '';
    //   display: block;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   width: 100%;
    //   height: 100%;
    //   background: rgba(0, 0, 0, .25);
    // }

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }

    .text {
      position: absolute;
      left: 240/$f+vw;
      bottom: 118/$f+vw;

      h1 {
        line-height: 1.2;
        color: #FFF;
        font-size: 75/$f+vw;
        font-weight: 600;
        text-transform: capitalize;
      }

      .line {
        width: 98/$f+vw;
        height: 8/$f+vw;
        background: linear-gradient(90deg, #3E88FF 0%, #146DFC 100%);
        margin: 10/$f+vw 0 30/$f+vw 0;
      }
      .des{
        font-size: 20/$f+vw;
        line-height: 1.5;
        color: #FFF;
      }
    }
  }

  .main{
     margin: 110/$f+vw 240/$f+vw;
     .types{
      display: flex;
      .item{
        color: #000;
        font-size: 24/$f+vw;
        text-transform: uppercase;
        padding-bottom: 20/$f+vw;
        border-bottom: 1px solid transparent;
        transition: all 600ms;
        font-weight: 500;
        cursor: pointer;
        &:not(:last-child){
          margin-right: 52/$f+vw;
        }
      }
      .on{
        border-color: #146DFC;
        color: #146DFC;
      }
     }
     .boxes{
      .box{
        display: none;
          .list{
            margin: 20/$f+vw 0 60/$f+vw 0;
            .item{
              border-bottom: 1px solid #D9D9D9;
              padding: 40/$f+vw 0;
              cursor: pointer;
              .d1{
                display: flex;
                justify-content: space-between;
                align-items: center;
                 .t1{
                  color: #000;
                  font-size: 24/$f+vw;
                  font-weight: 400;
                  margin: 0;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 90%;
                 }
                 .icon{
                  position: relative;
                  img{
                    display: block;
                    width: 36/$f+vw;
                    transition: all 600ms;
                  }
                  img:nth-child(2){
                    position: absolute;
                    left: 0;
                    top:0;
                    opacity: 0;
                  }
                 }
              }
              .d2{
                color: #666;
                width: 1329/$f+vw;
                font-size: 18/$f+vw;
                margin-top: 12/$f+vw;
                display: none;
              }
            }
            .active{
              .d1{
                .icon{
                  img:nth-child(1){
                    opacity: 0;
                  }
                  img:nth-child(2){
                    opacity: 1;
                  }
                }
              }
            }
          }
          .more{
            display: flex;
            width: fit-content;
            padding: 8/$f+vw 30/$f+vw;
            justify-content: center;
            align-items: center;
            gap: 20/$f+vw;
            border-radius: 91/$f+vw;
            border: 1px solid #000;
            background: #000;
            transition: all 600ms;
            margin: 0 auto;
            transition: all 600ms;
            color: #FFF;
            font-size: 20/$f+vw;
            cursor: pointer;
      
            p {
              line-height: 2;
              letter-spacing: 1px;
              text-transform: uppercase;
            }
            svg{
              width: 16/$f+vw;
              display: block;
            }
      
            &:hover {
              background: #5E9EFF;
              border-color: #5E9EFF;
            }
          }
      }
      .show_box{
        display: block;
      }
     }
  }

  @media screen and (max-width: 1024px) {
    .banner {
      margin-top: 60px;
      img{
        height: 150px;
      }
      .text{
        left: 5%;
        bottom:15%;
        width: 90%;
        h1{
          font-size: 20px;
        }
        .line{
          width: 60px;
          height: 2px;
          margin: 5px 0 15px 0;
        }
        .des{
          font-size: 14px;
        }
      }
    }
    .main{
      margin: 30px 5% 60px 5%;
      .types{
        flex-direction: column;
        .item{
          font-size: 18px;
          padding-bottom: 10px;
          text-align: center;
          &:not(:last-child){
            margin-right: 0;
            margin-bottom: 15px;
          }
        }
      }
      .boxes{
        .box{
          .list{
            margin: 20px 0 30px 0;
            .item{
              padding: 20px 0;
              .d1{
                .t1{
                  font-size: 18px;
                }
                .icon{
                  img{
                    width: 20px;
                  }
                }
              }
              .d2{
                width:100%;
                font-size: 16px;
                margin-top: 8px;
              }
            }
          }
          .more{
            padding: 4px 15px;
            gap: 10px;
            font-size: 18px;
            border-radius: 80px;
            svg{
              width: 16px;
            }
          }
        }
      }
    }
  }
}